<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>

</head>
<style>
    .aa{
        align-content: center
    }
</style>

<body>

<div id="app">
    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
              @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按书名搜索" value="name"></el-option>
        <el-option label="按作者搜索" value="author"></el-option>
        <el-option label="按分类搜索" value="type"></el-option>
        <el-option label="按书籍号搜索" value="bid"></el-option>
        <el-option label="所有书籍" value="all"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="text-center sorting">书籍名</th>
            <th class="text-center sorting">封面</th>
            <th class="text-center sorting">书籍号</th>
            <th class="text-center sorting">作者</th>
            <th class="text-center sorting">库存</th>
            <th class="text-center sorting">出版社</th>
            <th class="text-center sorting">分类类型</th>
            <th class="text-center sorting">状态</th>
            <th class="text-center sorting">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(book,index) in books" >
            <td class="text-center sorting aa"  >{{book.name}}</td>
            <td class="text-center sorting "><img v-bind:src="book.imgpath" height="80px" width="50px"></td>  <!--封面-->
            <td class="text-center sorting aa" >{{book.bid}}</td>
            <td class="text-center sorting aa">{{book.author}}</td>
            <td class="text-center sorting aa">{{book.num}}本</td>
            <td class="text-center sorting aa">{{book.press}}</td>
            <td class="text-center sorting aa">{{book.type}}
            <td class="text-center aa" v-if="book.num>0">可借用</td>
            <td class="text-center aa" v-if="book.num<=0">无库存</td>
            </td>
            <td class="text-center aa" v-if="book.num>0">
                <el-button type="primary"  v-on:click="borrowBooks(book.bid)">预约</el-button>
            </td>
            <td class="text-center aa" v-if="book.num<=0">
                <el-button type="primary"  v-on:click="borrowBooks(book.bid)" disabled>预约</el-button>
            </td>

        </tr>
        </tbody>
    </table>
    <!--    class="pageList"-->
    <div class="box-footer">
        <div class="pull-left">
            <div class="form-group form-inline">
                总共{{pages}} 页，共{{total}} 条数据。 每页
                <select class="form-control" v-model="meiye">
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                    <option>50</option>
                    <option>80</option>
                </select> 条
            </div>
        </div>

        <div class="box-tools pull-right">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                </li>
                <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                <li v-for="index in (pages>=7)?(7):(pages)"
                    class="paginate_button">
                    <a href="#" @click="goPage(index)">{{index}}</a></li>
                <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

            </ul>
        </div>

    </div>


</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {

            books: [],
            searchText: null,
            searchType: "",
            total: "",
            pages: "",
            pageNum: "",
            size: "",
            meiye: 10,

        },
        computed: {},
        created() {
            this.init()
            //this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
            this.findAll();
        },
        methods: {
            findAll(){
                var _this = this;
                axios({
                    method: "get",
                    url: "/web/selectallBooks"
                }).then(function (resp) {
                    _this.books = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            borrowBooks(bid) {
                var _this=this;
                axios({
                    method: "post",
                    url: "/web/user/borrowbook",
                    data: "bid=" + bid
                }).then(function (resp) {
                    var i = resp.data;
                    if (i == 1) {//借书成功
                       _this.$message.success('预约成功！')
                        _this.findAll()
                    } else if (i == 0) {
                        _this.$message.error('您已经借过这本书了！')
                    } else {
                        _this.$message.error('未知错误请联系管理员！')
                    }
                })
            },
            handleSearch() {
                var json = {
                    "text": this.searchText,
                    "type": this.searchType
                };
                var jsonstr = JSON.stringify(json);
                var _this = this;
                axios({
                    method: "post",
                    url: "/web/admin/ConditionalQuery",
                    data: jsonstr
                }).then(function (resp) {
                    _this.books = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                var json = {
                    "text": this.searchText,
                    "type": this.searchType,
                    "page": index,
                };
                var jsonstr = JSON.stringify(json);
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectallBooks",
                    data:jsonstr
                }).then(function (resp) {
                    _this.books = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                var json = {
                    "text": this.searchText,
                    "type": this.searchType,
                    "page": index,
                    "size": this.size,
                };
                var jsonstr = JSON.stringify(json);
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectallBooks",
                    data:jsonstr
                }).then(function (resp) {
                    _this.books = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
        }
    })
</script>


</html>